<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block</title>
    <style>
        /*   *{
               font-size: 20px;
           }*/
        .inline-box {
            display: inline-block;
        }

        .fu {
            margin-right: -8px;
        }

    </style>
</head>
<body>
<a href="http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距">参考自：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距</a>
<h3>inline-block之间的间距是由于标签之间换行、空格导致的，可以只用注释、单行写法解决</h3>
<h4>标签拆分相连，缺点：经不起格式化</h4>
<div>
    <div class="inline-box" style="width: 50px;height: 50px;background-color: coral"></div
    ><div class="inline-box" style="width: 50px;height: 50px;background-color: green"></div
    ><div class="inline-box" style="width: 50px;height: 50px;background-color: dodgerblue"></div>
</div>

<h4>单行写法，也经不起格式化</h4>
<div>
    <div class="inline-box" style="width: 50px;height: 50px;background-color: coral"></div><div class="inline-box" style="width: 50px;height: 50px;background-color: green"></div><div class="inline-box" style="width: 50px;height: 50px;background-color: dodgerblue"></div>
</div>

<h4>注释相连，也经不起格式化</h4>
<div>
    <div class="inline-box" style="width: 50px;height: 50px;background-color: coral"></div><!--
    --><div class="inline-box" style="width: 50px;height: 50px;background-color: green"></div><!--
    --><div class="inline-box" style="width: 50px;height: 50px;background-color: dodgerblue"></div>
</div>

<h4>取消标签闭合(调试ie5正常，其他的最低ie8)</h4>
<div>
    <!--div等原本为inline-block的元素可能不适合。缺点：语法常常报错，引发ide自动修改-->
    <a class="inline-box" style="width: 50px;height: 50px;background-color: coral">
        <a class="inline-box" style="width: 50px;height: 50px;background-color: green">
            <a class="inline-box" style="width: 50px;height: 50px;background-color: dodgerblue"></a>
</div>

<h4>使用外边距负值</h4>
<div>
    <!--缺点，适用性有限，不同的浏览器间距值是不同的，且与上下文字体大小有关（谷歌font-size=16px,则间距为8px）-->
    <!--参考：http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/-->
    <div class="inline-box fu" style="width: 50px;height: 50px;background-color: coral"></div>
    <div class="inline-box fu" style="width: 50px;height: 50px;background-color: green"></div>
    <div class="inline-box fu" style="width: 50px;height: 50px;background-color: dodgerblue"></div>
</div>

<h4>父元素使用0大小字体（影响子元素字体。如考虑格式化，也许是最优写法）</h4>
<div style="font-size: 0;-webkit-text-size-adjust:none;">
    <!--谷歌浏览器有默认最小字体(-webkit-text-size-adjust:none;),现已取消-->
    <div class="inline-box" style="width: 50px;height: 50px;background-color: coral;font-size: 20px">尼玛</div>
    <div class="inline-box" style="width: 50px;height: 50px;background-color: green;font-size: 20px">尼玛</div>
    <div class="inline-box" style="width: 50px;height: 50px;background-color: dodgerblue;font-size: 20px">尼玛</div>
</div>


</body>
</html>